<template>
  <!-- action="http://119.23.253.82:4000/upload/avatar" -->
  <el-upload
    class="avatar-uploader"
    action="http://localhost:4000/upload/avatar"
    :show-file-list="false"
    name="avatar"
    :on-success="handleAvatarSuccess"
    :headers="{ Authorization: `Bearer ${info.token}` }"
  >
    <img class="avatar br-5" :src="info.avatar" alt="" />
  </el-upload>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { success } from "@/utils";
export default {
  data() {
    return {
      imageUrl: "",
    };
  },
  computed: {
    ...mapState(["info"]),
  },
  methods: {
    ...mapMutations(["changeAvatar"]),
    /**
     * 成功上传头像
     */
    handleAvatarSuccess(res) {
      if (res.code === 1) {
        // 登录成功
        success("上传头像成功!");

        this.changeAvatar(res.data.url);
      }
    },
  },
  created() {
    this.$store.dispatch("getUserInfo");
  },
};
</script>

<style scoped>
.avatar {
  display: block;
  height: 80px;
  width: 80px;
}
</style>
